<template>
	<div class="table-container">
		<!--默认查询-->
		<vab-query-form>
			<el-form ref="formSearch" v-model="search" @submit.native.prevent :inline="inline2" :label-width="null">
				<el-form-item v-if="user.isAdminStore || user.isMainStore">
					<remoteselect v-model="search.SysStoreID" url="api/System/SysStoreListSelect"
						value-label="SysStoreName" value-key="SysStoreID" query-key="selectIDName"
						:placeholder="replaceID(keyLan['SysStoreID'])" style="width:150px;">
						<template v-slot="{ row }">
							{{ row.SysStoreName }}
						</template>
					</remoteselect>
				</el-form-item>
				<el-form-item>
					<el-input v-model="search.Name__PY" :placeholder="keyLan['Name']" @keyup.native.enter="getList"
						style="width:120px" ref="Name">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="search.Phone" :placeholder="keyLan['Phone']" @keyup.native.enter="getList"
						style="width:120px">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="search.Address" :placeholder="keyLan['Address']" @keyup.native.enter="getList"
						style="width:120px">
					</el-input>
				</el-form-item>

				<!-- <el-form-item>
					<el-select v-model="search.EnumStatus" clearable style="width:120px;"
						:placeholder="keyLan['EnumStatus']">
						<el-option v-for="item in EnumStatus" :key="item.Value" :value="item.Value"
							:label="enumLanTxt(item.Label)">
						</el-option>
					</el-select>
				</el-form-item> -->

				<el-form-item :label="keyLan['CreateDate'] + ':'">
					<el-date-picker v-model="search.CreateDate" type="daterange" :placeholder="keyLan['CreateDate']"
						style="width:220px">
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button icon="el-icon-search" type="primary" @click="getList" :loading="loading">
						{{ comLan["btnSearch"] }}
					</el-button>
					<el-button icon="el-icon-plus" type="primary" @click="btnAdd" v-if="button.新建">
						{{ comLan["btnAdd"] }}
					</el-button>
					<el-button icon="el-icon-download" type="primary" @click="btnExport" v-if="button.导出">
						{{ comLan["btnExport"] }}
					</el-button>
				</el-form-item>
			</el-form>
		</vab-query-form>
		<!--默认列表-->
		<u-table ref="table" v-loading="loading" :data="list" row-key="OrganizationID" :use-virtual="useVirtual">
			<u-table-column v-if="user.isAdminStore || user.isMainStore" prop="SysStore.SysStoreName"
				:label="comLan['Key']['SysStore']['SysStoreName']" width="120" align="left"></u-table-column>

			<u-table-column prop="Name" :label="keyLan['Name']" width="180" align="left">
			</u-table-column>
			<u-table-column prop="Phone" :label="keyLan['Phone']" width="180" align="left">
			</u-table-column>
			<u-table-column prop="Address" :label="keyLan['Address']" width="280" align="left">
			</u-table-column>

			<!-- <u-table-column prop="EnumStatus" :label="keyLan['EnumStatus']" width="50" align="center">
				<template v-slot="scope">
					<span v-html="getLabel(scope.row.EnumStatus, EnumStatus)"></span>
				</template>
			</u-table-column> -->

			<u-table-column prop="CreateDate" :label="keyLan['CreateDate']" width="160" align="center">
				<template v-slot="scope">
					<span v-if="!!scope.row.CreateDate">{{ scope.row.CreateDate | datetime }}</span>
				</template>
			</u-table-column>
			<u-table-column prop="Remark" :label="keyLan['Remark']" align="left"></u-table-column>

			<u-table-column2 v-if="showOp">
				<template v-slot="scope">
					<el-button type="text" @click="btnEdit(scope)" v-if="button.编辑">
						{{ comLan["btnEdit"] }}
					</el-button>
					<!-- <el-button type="text" @click="btnEnumStatus(scope, scope.row.EnumStatus == 0 ? 1 : 0)"
						v-if="button.启用禁用">
						{{ scope.row.EnumStatus == 0 ? comLan["btnEnable"] : comLan["btnDisable"] }}
					</el-button> -->

					<el-button type="text" @click="btnDel(scope)" v-if="button.删除">
						{{ comLan["btnDel"] }}
					</el-button>
				</template>
			</u-table-column2>
		</u-table>
		<el-pagination v-if="showPage" :current-page="search.index" :page-size="search.size" :total="total"
			@current-change="indexChange" @size-change="sizeChange"></el-pagination>

		<!--默认新建编辑-->
		<exAddEdit ref="exAddEdit" @success="getList"></exAddEdit>
	</div>
</template>

<script>
import common from "@/common/common.js";
import js from "./js.js";
import exAddEdit from "./OrganizationAddNew";

export default {
	name: "OrganizationListNew",
	mixins: [common.baseVM, js],
	components: {
		exAddEdit
	},
	computed: {},
	data() {
		return {
			button: {
				查询: false,
				新建: false,
				编辑: false,
				启用禁用: false,
				// 上架下架: false,
				删除: false,
				导出: false
			},
			search: {
				SysStoreID: null,
				Name: null,
				Phone: null,
				Address: null,
				EnumStatus: 1,
				CreateDate: [],

				Name__PY: null
			},
			isRedict: false
		};
	},
	methods: {
		selectionChange(val) {
			//console.log("selectionChange", val);
		},
		init() {
			this.$nextTick(() => {
				this.$refs.Name.focus();
			});
			var query = this.getQuery();
			var temp = query['Name__PY'];
			if (!!temp) {
				this.search.Name__PY = temp;
			}
			this.loadDefaultSearch(() => {
				this.getList();
			});
		},
		btnAdd() {
			if (this.isRedict) {
				// 跳转链接
				var url = "/Organization/OrganizationAddRedict";
				this.navigateToRefresh(url);
			} else {
				this.$refs["exAddEdit"].show();
			}
		},
		btnEdit(scope) {
			if (this.isRedict) {
				// 跳转链接
				var url = "/Organization/OrganizationAddRedict";
				this.navigateToRefresh(url, {
					id: scope.row.OrganizationID
				});
			} else {
				this.$refs["exAddEdit"].show(scope);
			}
		},
		btnEnumStatus(scope, status) {
			var id = scope.row.OrganizationID;
			var name = scope.row.Name;
			var str = status == 1 ? this.comLan["btnEnable"] : this.comLan["btnDisable"];
			var msg = this.stringFormat(this.comLan.js["updateEnumStatus"], name, str);
			this.confirm(msg, () => {
				this.post("api/Organization/UpdateEnumStatus", this.toKeyValue({
					id: id,
					status: status
				})).then(data => {
					this.showToast(data.Message, "success");
					this.getList();
				}).catch(error => { });
			});
		},
		btnDel(scope) {
			var id = scope.row.OrganizationID;
			var name = scope.row.Name;
			var msg = this.stringFormat(this.comLan.js["delete"], name);
			this.confirm(msg, () => {
				this.post("api/Organization/Del", this.toKeyValue({
					id: id
				})).then(data => {
					this.showToast(data.Message, "success");
					this.getList();
				}).catch(error => { });
			});
		},
		getList() {
			this.getListByUrl('api/Organization/List');
		},
		btnExport() {
			this.$refs.exTable.exportFile(this.keyLan["name"]);
		}
	}
};
</script>
